
// 页面加载时，自动执行
$(document).ready(function() {
    // 项目类型
    // queryProjectType();

    // 需求列表查询
    // queryDemand();

    // 查询学生信息
    let reqData = {};
    queryStudentInfo(reqData);

});

// 查询学生信息
function queryStudentInfo(reqData) {
    // 访问地址
    let basePath = $("#basePath").val();
    let path = basePath + "/StudentfindAll";

    layui.use(['table','element'], function() {
        table = layui.table;
        //执行一个 table 实例
        table.render({
            elem: '#table_user'
            ,height: 420
            //整合到自己项目中是,您应该使用使用url参数,并且注释掉data参数
            // ,url: '/demo/table/user/' ,//数据接口,数据格式见 https://www.layui.com/doc/modules/table.html#async
            //data参数只是演示使用,实际项目,请实现上方url数据接口
            //,data:[{"id":10112,"username":"user-112","sex":"女","city":"城市-112","sign":"签名-112","experience":430,"logins":157,"wealth":11201724,"classify":"酱油","score":37},{"id":10113,"username":"user-113","sex":"男","city":"城市-113","sign":"签名-113","experience":139,"logins":115,"wealth":67486950,"classify":"词人","score":94},{"id":10114,"username":"user-114","sex":"女","city":"城市-114","sign":"签名-114","experience":598,"logins":70,"wealth":90954340,"classify":"词人","score":71},{"id":10115,"username":"user-115","sex":"女","city":"城市-115","sign":"签名-115","experience":512,"logins":138,"wealth":36298584,"classify":"酱油","score":83},{"id":10116,"username":"user-116","sex":"男","city":"城市-116","sign":"签名-116","experience":537,"logins":71,"wealth":72662141,"classify":"诗人","score":85}]
            , url: path
            , method: 'post'
            , where: reqData
            , contentType: 'application/json'
            , autoSort: false
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: '#toolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true ,//开启合计行
            limit:3,//设置每页显示条数,根据自己项目情况去设置
            limits:[1,2,3]//设置每页条数下拉框的选择项,就是分页那一栏的下拉框选项

            , cols: [
                [ //表头
                    {
                        type: 'checkbox',
                        fixed: 'left'
                    },
                    {
                        field: 'stuNum',
                        title: '学号',
                        width: 80,
                        sort: false,
                        fixed: 'left',
                        totalRowText: '合计：'
                    }, {
                    field: 'stuName',
                    title: '学生姓名',
                    width: 80,

                }, {
                    field: 'mobile',
                    title: '手机号',
                    width: 140,
                    sort: false,
                    totalRow: true
                }, {
                    field: 'sex',
                    title: '性别',
                    width: 80
                }, {
                    field: 'age',
                    title: '年龄',
                    width: 80
                }, {
                    field: 'idType',
                    title: '证件类型',
                    width: 120,
                    sort: false
                }, {
                    field: 'idNum',
                    title: '证件号码',
                    width: 160,
                    sort: false
                }, {
                    field: 'birthday',
                    title: '出生日期',
                    width: 160
                }, {
                    field: 'pca',
                    title: '籍贯',
                    width: 180
                }, {
                    field: 'createDate',
                    title: '创建时间',
                    width: 160,
                    sort: false
                }, {
                    field: 'updateDate',
                    title: '修改时间',
                    width: 160,
                    sort: false
                } , {
                    fixed: 'right',
                    minWidth: '101px',
                    align: 'center',
                    toolbar: '#actionBar'
                }
                ]
            ],done: function (res, curr, count) {
                // 性别
                $("[data-field='sex']").children().each(function () {
                    if ($(this).text() == 'M') {
                        $(this).text('男');
                    } else if ($(this).text() == 'F') {
                        $(this).text('女');
                    }
                });

                $("[data-field='idType']").children().each(function () {
                    if ($(this).text() == 'C') {
                        $(this).text('身份证');
                    } else if ($(this).text() == 'X') {
                        $(this).text('香港身份证');
                    } else if ($(this).text() == 'A') {
                        $(this).text('澳门身份证');
                    }
                });

                $("[data-field='birthday']").children().each(function () {
                    var birthday = $(this).text();
                    if (birthday.indexOf('出生日期') == -1) {
                        $(this).text(getYMDHMS(parseInt(birthday)));
                    }
                });

                $("[data-field='createDate']").children().each(function () {
                    var birthday = $(this).text();
                    if (birthday.indexOf('创建时间') == -1) {
                        $(this).text(getYMDHMS(parseInt(birthday)));
                    }
                });

                $("[data-field='updateDate']").children().each(function () {
                    var birthday = $(this).text();
                    if (birthday.indexOf('修改时间') == -1) {
                        $(this).text(getYMDHMS(parseInt(birthday)));
                    }
                });

            }
            ,size: 'lg'
        });





        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'mult-del':
                    if(data.length === 0){
                        layer.msg('请至少选择一行');
                    } else {
                        layer.confirm('真的删除选择行吗', function(index){
                            var result = [];
                            for (var i in data) {
                                result.push(data[i]['id']);
                            }
                            //关闭弹窗
                            layer.close(index);
                            layer.alert("您选择了删除这些id:"+JSON.stringify(result)+",使用ajax 发送这些数据给后端就行了")
                            //向服务端发送删除指令
                            // $.ajax({
                            //         url:"批量删除用户的接口",
                            //         type:"POST",
                            //         data:result,
                            //         success:function(data){
                            //             console.log(data)
                            //             //表格重新加载
                            //             table.reload('table_user', {
                            //               url: '重载数据的接口'//重载数据的接口,一般和上方初始化render中的url相同
                            //               ,where: {} //无则不填,设定异步数据接口的额外的get参数
                            //             });
                            //         }
                            // })
                        });


                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值

            if(layEvent === 'detail'){
                //内嵌iframe加载自己的详情页面地址
                openFrame("https://www.baidu.com/baidu?word="+data.username+"&ie=utf-8&tn=maxco3_dg&ch=1")
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    // $.ajax({
                    //         url:"删除用户的接口",
                    //         type:"POST",
                    //         data:{user_id:data.id},
                    //         success:function(data){
                    //             console.log(data)
                    //         }
                    // })
                });
            } else if(layEvent === 'edit'){
                // 1.免加载url弹窗(参考[备注按钮]) addComment()
                // 2.iframe加载url弹窗(参考[查看按钮]) openFrame()
                // 3.使用location.href直接重定向
                layer.alert('编辑操作,你可以灵活选择以下方式:<br>1.免加载url弹窗(参考[备注按钮])<br>2.iframe加载url弹窗(参考[查看按钮])<br>3.使用location.href直接重定向');
            }else if(layEvent === 'comment'){
                //免加载页面弹窗
                addComment(data.id,data.username)
            }
        });
    })

}

// 条件查询
function findStudentInfo() {

    let reqData = {
        "stuName": $("#stuName").val(),
        "mobile": $("#mobile").val(),
        "sex": $("#sex").val(),
        "age": $("#age").val(),
        "idNum": $("#idNum").val()
    };

    queryStudentInfo(reqData);
}


// 时间戳
function getYMDHMS(timestamp) {
    let time = new Date(timestamp)
    let year = time.getFullYear()
    const month = (time.getMonth() + 1).toString().padStart(2, '0')
    const date = (time.getDate()).toString().padStart(2, '0')
    const hours = (time.getHours()).toString().padStart(2, '0')
    const minute = (time.getMinutes()).toString().padStart(2, '0')
    const second = (time.getSeconds()).toString().padStart(2, '0')

    return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
}



/**
 * 备注功能(在点击事件中调用此函数即可,或在标签中onclick属性直接调用)
 * @param {Object} user_id 用户id
 */
function addComment(user_id,username=""){
    layui.use(['layer','laytpl'], function() {
        var $ = layui.$ //重点处,layui有内置jquery模块
        var layer = layui.layer,laytpl=layui.laytpl;
        //给模板 tpl-user 传递参数
        var tpldata = {
            "user_id": user_id,
            "username": username?username:"傻瓜教程",
            "content": "",
        };
        //获取id为tpl-user的noscript标签的html内容,不能使用innerHtml
        laytpl(document.getElementById('tpl-user').innerText)
            .render(tpldata,function(html){
                //渲染完成后直接打开
                layer.open({
                    type: 1,
                    shade: false,
                    area: ['80%', '50%'],
                    title: false, //不显示标题
                    content: html,
                });
            });
    });

}
//以iframe的形式加载url
function openFrame(url,width=0,height=0){
    $ = layui.$;
    layer.open({
        type: 2,
        title: '窗口',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : [width?width:$(window).width()*0.8+'px', height?height:$(window).height()*0.92+'px'],
        content: url
    });

}



<!-- 下方script标签中不能使用单行注释语句,否则laytpl编译解析会报错-->
<!-- 语句之间也要严格用分号隔开,因为laytpl编译时,那些换行都被去掉了,导致代码连在一起 -->
    layui.use(['jquery', 'form'], function() {
    var $ = layui.$;
    var form = layui.form,layer = layui.layer,laydate = layui.laydate;
    $('.layui-btn.tt').on('click',function() {
    console.log(121212)
});
    form.verify({
    contentRule: function(value) {
    if (value.length < 5) {
    return '标题至少得5个字符啊';
}
},
});
    form.on('submit(demo1)', function(data) {
    layer.alert(JSON.stringify(data.field), {
    title: '用户id为:{{d.user_id}}的提交信息'
});
    /**可以在ajax 地址中,传入user_id参数*/
    /**
     var postData = {};
     $.post("/modify/user?user_id={{d.user_id}}",postData,function(data,status){
                                    console.log(data);
                                    layer.closeAll();
                                });
     */
    return false;
});
    /** 要使用render,复杂表单才能显示 */
    form.render();
});

